<template>
  <time-line class="event-time-line" :data-list="timeLineData">
    <template #default="{ data }">
      <p v-for="(content, index) of data.list" :key="index" class="time-line-content">
        <template v-if="Array.isArray(content)">
          <span v-for="(text, i) of content" :key="i">
            <template v-if="text">
              <span v-if="typeof text === 'string'">{{ text }}</span>

              <component v-else :is="text.component" v-bind="text.props" />
            </template>
            <span v-else>-</span>
          </span>
        </template>
        <template v-else>{{ content }}</template>
      </p>
    </template>
  </time-line>
</template>

<script>
import TimeLine from '@gis/lib/components/antd-time-line/index.vue';
import AttachmentList from '@gis/lib/components/attachment-list.vue';

function getAttachment(list) {
  if (!list || !list.length) return '-';
  return {
    component: AttachmentList,
    props: {
      dataList: list,
    },
  };
}

export default {
  name: 'event-time-line',
  components: { TimeLine },
  props: {
    dataList: { type: Array, default: () => [] },
  },
  computed: {
    timeLineData() {
      return this.dataList.map((item) => {
        return {
          list: [
            [item.action, item.create_time],
            ['流程结果：', item.content],
            ['操作人：', item.creator_name],
            ['附件：', getAttachment(item.attachment_list)],
          ],
        };
      });
    },
  },
};
</script>

<style scoped lang="less">
.event-time-line {
  .time-line-content {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.5;
    & > span {
      &:not(:first-child) {
        margin-left: 1em;
      }
    }
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    &:first-child {
      color: #6acbc1;
    }
  }
}
</style>
